import React from 'react';
import { connect } from 'dva';
import { Select, DatePicker, Button, Table, Pagination, Menu } from 'antd';
import { VtxGrid } from 'vtx-ui';
import { NAME_SPACE } from '../../../components/CollectionAmountStatistics/config';
import styles from './collectionAmountStatistics.less';
import _ from 'lodash';
import moment from 'moment';
import OverView from '../../../components/CollectionAmountStatistics/OverView';
import ChartView from '../../../components/CollectionAmountStatistics/ChartView';
import Details from '../../../components/CollectionAmountStatistics/Details'
import Model from '../../../components/CollectionAmountStatistics/Model'

const Option = Select.Option
const Item = Menu.Item

const Index = ({dispatch, collectionAmountStatistics}) => {
  const {
    loading,
    pageNo,
    pageSize,
    total,
    searchParams,
    oldSearchParams,
    // 曲线图
    diagramVisable,
    diagramKey,
    detailsModelVisable,
    details,
    detailsLoading,
    detailsPageNo,
    detailsPageSize,
    detailsTotal,
     // 人员名称
     userName,
     // 车牌号
     carNum,
     detailsSearchParams,
     imgList,
     picVisable,
  } = collectionAmountStatistics

  const changePage = (e) => {
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        diagramKey: e.key,
        detailsModelVisable: false
      }
    })
  }


  const detailsProps = {
    dispatch,
    detailsModelVisable,
    details,
    detailsLoading,
    detailsPageNo,
    detailsPageSize,
    detailsTotal,
     // 人员名称
     userName,
     // 车牌号
     carNum,
     detailsSearchParams,
  }

  const modelProps = {
    imgList,
    picVisable,
    dispatch,
  }

  return(
    
    <div className={styles.normal}>
      {/* 图片 */}
      <Model {...modelProps}/>
       <div className={styles.menu}>
          <Menu onClick={(e) => {changePage(e)}} selectedKeys={[diagramKey]} mode="horizontal">
            <Item key={'table'}>总览视图</Item>
            <Item key={'chart'}>曲线视图</Item>
          </Menu> 
        </div>
      {
        !detailsModelVisable?
        <div style={{height: document.documentElement.clientHeight - 48}}>
          {
            diagramKey == 'table'?
              <OverView/>
            :
              <ChartView/>
          }
        </div>
      :
        <Details {...detailsProps} style={{height: document.documentElement.clientHeight - 48}}/>  
      }
      
    </div>
  )
}

export default connect(state => state)(Index)